<script setup lang="ts">

import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios.ts";
import {router} from "../main.ts";
import MyAxios from "../plugins/myAxios.ts";
import {showToast} from "vant";
import {showToast as Toast} from "vant/lib/toast/function-call";


const show = ref(false);


const showStr = ref('')


const initialize = () => {
  show.value = true;
  showStr.value = ""
  levelShow();

}

const showText = () => {
  showStr.value = ""

  const text = "学习是一件有趣的事情 ！"
  let index = 0;

  function type() {
    if (index < text.length) {
      showStr.value += text.charAt(index);
      index++;
      setTimeout(type, 100); // 设置打字速度
    }
  }

  type();

}

const levelShow = () => {

  myAxios.get('/user/level/rank')
      .then(res => {
        list.value = res.data.data;
        console.log(res.data.data)
        console.log(list.value)
        textShow.value = "等级榜"
        textShow1.value = "用户名"
        textShow2.value = "等级"
      })
      .catch(err => {
        console.log(err)
      })
}

const favourShow = () => {
  myAxios.get('/user/favour/rank')
      .then(res => {
        list.value = res.data.data;
        console.log(res.data.data)
        console.log(list.value)
        textShow.value = "收藏榜"
        textShow1.value = "用户名"
        textShow2.value = "被收藏数"
      })
      .catch(err => {
        console.log(err)
      })
}

const thumbShow = () => {
  myAxios.get('/user/thumb/rank')
      .then(res => {
        list.value = res.data.data;
        console.log(res.data.data)
        console.log(list.value)
        textShow.value = "点赞榜"
        textShow1.value = "用户名"
        textShow2.value = "被点赞数"
      })
      .catch(err => {
        console.log(err)
      })
}


const list = ref<{
  id: number;
  userName: string;
  userAvatar: string;
  gender: string;
  atPresentLevel: number;
  favourNum: number;
  thumbNum: number;
  postContent: string;
}[]>([]); // 使用 ref 创建响应式变量




const textShow = ref('请选择')
const textShow1 = ref('')
const textShow2 = ref('')
const activeName = ref(0);

const show2 = ref(false);

const showUser = (index: number) => {
  activeName.value = index;
  console.log(list.value[index])
  console.log(index)
  show2.value = true;
}

const showAdmin = ref('作者：W.、Z.、L.')
const noShowAdmin = () => {
  showAdmin.value = ''
}

const value = ref('');
const onSearch = () => {
  router.push({path: '/home/search', query: {content: value.value}})
}


const images = [
  'https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/sc_board_djlb.png',
  'https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/wf_banner_02.png',
  'https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/wf_banner_03.png'
];


onMounted(() => {
  MyAxios.post('/post/list', {pageNum: 1, pageSize: 5}) // 发送 POST 请求
      .then(res => {
        console.log(res); // 打印接口返回的数据
        console.log(res.data);
        if (res.data.data == null) {
          showToast('没有更多数据了')
        } else {
          postList.value = [];
          postList.value = res.data.data; // 使用 ref 创建的响应式变量
          console.log(postList.value); // 打印接口返回的数据
          // 处理其他返回的数据...
          return res.data.data;
        }
      })
      .catch(err => {
        console.error("Error fetching data:", err);
      });



  myAxios.get('user/video/hot')
      .then(res => {
        videoList.value = res.data.data;
        console.log(res.data);
      })
      .catch(err => {
        console.log(err);
        Toast('搜索失败');
      })
})


const postList = ref<{
  id: number;
  title: string;
  content: string;
  thumbNum: number;
  favourNum: number;
  userId: number;
  createTime: string;
  updateTime: string;
}[]>([]); // 使用 ref 创建响应式变量

interface Item {
  // interface 改成 type 也行
  id: number;
}

const postDetails = (item: Item) => {
  router.push({
    path: 'post/get',
    query: {
      id: item.id
    }
  })
}

const videoList = ref<{
  id: number;
  videoName: string;
  videoUrl: string;
}[]>([]); // 使用 ref 创建响应式变量
const videoDetails = (item: Item) => {

  router.push({
    path: '/topic',
    query: {
      id: item.id
    }
  })
}

</script>

<template>
  <van-nav-bar class="nav-bar"
               title="首页"
  >

  </van-nav-bar>

  <div class="container">

    <van-overlay :show="show" z-index="1000">
      <img src="../assets/最终叉号键.png" class="back-btn" @click="show = false">

      <div class="dialogue">
        <img src="../assets/最终弹出对话框.png" class="dialogue-img">
        <div class="text" id="text">{{ showStr }}</div>

      </div>
      <div class="shade">
        <!--       <img src="../assets/最终学习方向弹出框.png" class="path-img">-->
        <van-collapse v-model="activeName" accordion class="back-img"></van-collapse>
      </div>
      <div class="character">
        <img src="../assets/最终弹出框人物立绘.png" class="character-img" @click="showText">
      </div>

      <div class="show-rank">
        <van-button round class="rank-img1" @click="showUser(0)"></van-button>
        <van-button round class="rank-img1" style="top:16%" @click="showUser(1)"></van-button>
        <van-button round class="rank-img1" style="top:17%" @click="showUser(2)"></van-button>
        <van-button round class="rank-img2" style="top:18%" @click="showUser(3)"></van-button>
        <van-button round class="rank-img2" style="top:19%" @click="showUser(4)"></van-button>
        <van-button round class="rank-img2" style="top:20%" @click="showUser(5)"></van-button>
        <van-button round class="rank-img2" style="top:21%" @click="showUser(6)"></van-button>
        <van-button round class="rank-img2" style="top:22%" @click="showUser(7)"></van-button>
        <van-button round class="rank-img2" style="top:23%" @click="showUser(8)"></van-button>
        <van-button round class="rank-img2" style="top:24%" @click="showUser(9)"></van-button>
        <img src="../assets/最终第一标.png" class="sign1">
        <img src="../assets/最终第二标.png" class="sign1" style="top:21%;width:11.5%;left:15.25%">
        <img src="../assets/最终第三标.png" class="sign1" style="top:27%;width:11%; left:15.5%">

        <div class="show-rank1" v-for="(item,index) in list" :key="index">
          <span class="rank-num" :style="{ top: `${17 + index*6}%`, left: '30%'}">{{ item.userName }}</span>
          <span class="rank-num1" :style="{ top: `${17 + index*6}%`, left: '90%'}">{{ item.atPresentLevel }}</span>
        </div>
        <div class="show-rank1" v-for="(item,index) in list" :key="index">
          <span class="rank-num" :style="{ top: `${17 + index*6}%`, left: '30%'}">{{ item.userName }}</span>
          <span class="rank-num1" :style="{ top: `${17 + index*6}%`, left: '96%'}">{{ item.favourNum }}</span>
        </div>
        <div class="show-rank1" v-for="(item,index) in list" :key="index">
          <span class="rank-num" :style="{ top: `${17 + index*6}%`, left: '30%'}">{{ item.userName }}</span>
          <span class="rank-num1" :style="{ top: `${17 + index*6}%`, left: '96%'}">{{ item.thumbNum }}</span>
        </div>
      </div>


      <span class="aaa">{{ textShow }}</span>
      <span class="bbb">{{ textShow1 }}</span>
      <span class="ccc">{{ textShow2 }}</span>
      <van-button class="select-btn" @click="levelShow">等级榜</van-button>
      <van-button class="select-btn" style="left:30%" @click="favourShow">收藏榜</van-button>
      <van-button class="select-btn" style="left:50%" @click="thumbShow">点赞榜</van-button>
    </van-overlay>

    <!--  用户信息展示-->
    <van-overlay :show="show2" @click="show2 = false" class="user-info-overlay" style="z-index: 1000;">
      <div class="user-info">
        <span class="haha">详情</span>
        <img :src="list[activeName].userAvatar" class="user-avatar" style="border: 2px solid #8d8c8c;">
        <img src="../assets/表情包1.png" class="user-icon">
        <div style="top: 40%; left: 30%; position: absolute;">
          <p v-if="list[activeName].userName">用户名: {{ list[activeName].userName }}</p>
          <p v-if="list[activeName].gender">性别: {{ list[activeName].gender }}</p>
          <p v-if="list[activeName].atPresentLevel">等级: {{ list[activeName].atPresentLevel }}</p>
          <p v-if="list[activeName].favourNum">被收藏数: {{ list[activeName].favourNum }}</p>
          <p v-if="list[activeName].thumbNum">被点赞数: {{ list[activeName].thumbNum }}</p>
        </div>
      </div>
    </van-overlay>

    <form action="/">
      <van-search
          v-model="value"
          shape="round"
          placeholder="请输入搜索关键词"
          @search="onSearch"
          class="search"
      />
    </form>


    <van-swipe class="my-swipe" style="height: 12%; opacity: 0.9;" :autoplay="6000" indicator-color="white">
      <van-swipe-item v-for="image in images" :key="image">
        <img style="width: 100%; height: 100%;" :src="image" alt=""/>
      </van-swipe-item>
    </van-swipe>
    <!--  <p style=" position:absolute; top: 16%; left: 32%; font-family: STXingkai,serif  ; font-size: 32px; color: #e83b3b;">广告招租</p>-->

    <van-notice-bar
        left-icon="volume-o"
        text="今日快讯：用户‘为什么’荣登排行榜的原因竟然是(￣▽￣)。。。点我查看详情"
        @click="initialize"
    />
    <!-- closeable 模式，在右侧显示关闭按钮 -->
    <van-notice-bar mode="closeable" @close="noShowAdmin">{{ showAdmin }}</van-notice-bar>


    <div class="function-background">
      <van-grid style="opacity: 0.9; font-family: STXingkai,serif;" icon-size="40px" :column-num="5">
        <van-grid-item icon="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/xgn_icon_mp.png"
                       text="学习视频" to="/learn"/>
        <van-grid-item
            icon="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/%E6%9C%80%E7%BB%88%E6%88%91%E7%9A%84%E5%B8%96%E5%AD%90.png"
            text="帖子" to="/"/>
        <van-grid-item
            icon="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/%E6%9C%80%E7%BB%88%E6%A0%87%E7%AD%BE%E6%A0%8F%E4%BC%A0%E9%81%93.png"
            text="发帖" to="/team"/>
        <van-grid-item
            icon="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/%E6%9C%80%E7%BB%88%E6%8E%92%E8%A1%8C%E6%A6%9C%E6%8C%89%E9%92%AE.png"
            text="排行榜" @click="initialize"/>
        <van-grid-item icon="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/xgn_icon_szyf.png" text="考试"
                       to="/examination/path"/>
        <van-grid-item icon="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/xgn_icon_wf.png"
                       text="错题回顾" to="/review"/>
        <van-grid-item icon="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/lt_icon_kuafupingdao.png"
                       text="关于我们" to="/admin"/>
      </van-grid>
    </div>

    <div class="post-background">
      <div style="height: 100%;width: 100%">
        <van-cell title="最新帖子" icon="records-o" style="opacity: 0.9;height: 100%;">
          <template #label>
            <van-card
                class="show-card"
                v-for="item in postList"
                :title="item.title"
                :desc="item.content"
                @click="postDetails(item)"
                style="height:60px;"
            />
          </template>

        </van-cell>
      </div>


    </div>
    <div class="video-background">
      <div style="height: 100%;width: 100%">
        <van-cell title="最新视频" icon="video-o" style="opacity: 0.9">
          <template #label>
            <van-card
                class="show-card"
                v-for="item in videoList"
                :title="item.videoName"
                thumb="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/K69HJUK)2YZ_(W0%7BE%5B387WK.png"
                @click="videoDetails(item)"

            />
          </template>
        </van-cell>
      </div>
    </div>

    <img src="../assets/云雾.png" class="bottom-img">

    <p style="position: absolute;top:90%;left: 60%;font-size: 16px;color: #999;font-family: STXingkai,serif;">完成时间：2024-04-24</p>


    <!--  <van-grid :border="true" :column-num="2">-->
    <!--    <van-grid-item  @click="initialize" to="/learn">  &lt;!&ndash;to="/learnPath"&ndash;&gt;-->
    <!--      <van-image-->
    <!--          src="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/%E6%9C%80%E7%BB%88%E4%B8%96%E7%95%8C%E9%80%89%E9%A1%B9%E5%8D%A11.png"-->
    <!--      />-->
    <!--    </van-grid-item>-->
    <!--    <van-grid-item to="/">-->
    <!--      <van-image-->
    <!--          src="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/%E6%9C%80%E7%BB%88%E4%B8%96%E7%95%8C%E9%80%89%E9%A1%B9%E5%8D%A12.png"-->
    <!--      />-->
    <!--    </van-grid-item>-->

    <!--    <div class="text1" @click="haha1">-->
    <!--      <span>学习方向</span>-->
    <!--    </div>-->
    <!--    <div class="text2" @click="haha2">-->
    <!--      <span>交流心得</span>-->
    <!--    </div>-->
    <!--  </van-grid>-->


  </div>


</template>


<style scoped>


.function-background {

  background-size: 100% 100%; /* 图片大小 */

  top: 0;
  margin-bottom: 20px;
  left: 0;
  z-index: 1;
}

.post-background {
  background-image: url('../assets/功能背景.png');
  background-size: 100% 100%; /* 图片大小 */
  width: 100%;
  top: 0;
  margin-bottom: 20px;
  left: -8%;
  z-index: 1;
}

.show-card {
  margin-top: 10px;

  width: 90%;
  left: 0;
  height:60px;

  position: relative;
}

.video-background {
  background-image: url('../assets/功能背景.png');
  background-size: 100% 100%; /* 图片大小 */

  top: 0;
  margin-bottom: 20px;
  left: 0;
  z-index: 1;
}

.search {
  position: absolute;
  top: 5%;
  width: 85%;
  left: 7.5%;
  z-index: 999;
  opacity: 0.7;
}

.my-swipe van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.rank-num {
  position: absolute;
  top: 17%;
  left: 30%;
  font-size: 12px;
  text-align: center;
}

.rank-num1 {
  position: absolute;
  top: 17%;
  left: 80%;
  font-size: 12px;
  text-align: center;

}

.aaa {
  top: 76%;
  left: 31%;
  position: absolute;
  font-size: 21px;
  font-family: STXingkai, serif;
}

.bbb {
  top: 13%;
  left: 15%;
  position: absolute;
  font-size: 21px;
  font-family: STXingkai, serif;
  z-index: 999;
}

.ccc {
  top: 13%;
  left: 49%;
  position: absolute;
  font-size: 21px;
  font-family: STXingkai, serif;
  z-index: 999;
}

.user-info {
  position: absolute;
  top: 30%;
  left: 10%;
  width: 80%;
  height: 30%;
  z-index: 999;
  background-image: url("../assets/最终查询用户.png");


}

.user-icon {
  position: absolute;
  top: 20%;
  left: 75%;
  width: 70px;
}

.haha {
  position: absolute;
  top: 14%;
  left: 45%;
  font-size: 20px;
  font-weight: bold;
  font-family: STXingkai, serif;
  color: #ffffff;
}

.select-btn {
  position: absolute;
  top: 80%;
  left: 10%;
  width: 70px;
  height: 30px;
  background-color: #f5f5f5;
  border-radius: 10px;
  font-size: 10px;
  font-weight: bold;
  color: #333;
  z-index: 999;
}

.sign1 {
  position: absolute;
  top: 15%;
  left: 15%;
  width: 12%;
  height: 5%;
  z-index: 999;
  opacity: 0.7;
}


.rank-img1 {
  background-image: url('../assets/最终前三展示.png');
  width: 100%;
  height: 5%;
  top: 15%;
  left: 14%;
  background-size: 100% 100%; /* 图片大小 */
}

.rank-img2 {
  background-image: url('../assets/最终前十展示.png');
  width: 100%;
  height: 5%;
  top: 15%;
  left: 14%;
  background-size: 100% 100%; /* 图片大小 */
}


.back-img {
  background-image: url('../assets/最终排行榜.png');

  background-size: 100% 100%; /* 图片大小 */
  width: 100%;
  height: 100%;
}

.show-rank {
  width: 60%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 1.5%;
  z-index: 999;
}

.show-rank1 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}


.text {
  width: 55%;
  height: 25%;
  top: 12%;
  left: 100%;
  position: absolute;
  z-index: 999;
  font-size: 24px;
  font-family: STXingkai, serif;
}

.back-btn {
  position: fixed;
  float: right;
  right: 0;
  top: -5px;
  width: 50px;
  height: 60px;
  z-index: 2;
}

.shade {
  width: 80%;
  height: 100%;
  top: -5%;
  position: absolute;
}

.character {
  margin-left: 50%;
  margin-top: 85%;
  width: 40%;
  height: 40%;
  position: absolute;
  top: 5%;
  left: 10%;
}

.character-img {
  width: 100%;
  height: 100%;
  top: 20%;
  position: absolute;
}

.dialogue {
  width: 20%;
  height: 100%;
  left: 60%;
  position: absolute;
  top: 0;
}

.dialogue-img {
  margin-left: 80%;
  margin-top: 25%;
  width: 80%;
  height: 80%;
}


.container {
  padding: 15px;
  height: 180%;
  background-color: #f5f5f5;
  position: relative;
}

.nav-bar {
  position: relative;
  inset: 0;
  width: 100%;
  height: 46px;
  background-image: url("../assets/导航栏2.png");
  opacity: 0.6;
  z-index: 1;
}

</style>